const {ccclass, property} = cc._decorator;

@ccclass
export default class CheckBox extends cc.Component{

    target: cc.Sprite;

    @property(cc.SpriteFrame)
    sprite: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    checkedSprite: cc.SpriteFrame = null;

    @property
    checked = false;

    

    onLoad(){
        this.target = this.node.getComponentInChildren(cc.Sprite);
        cc.vv.utils.addClickEvent(this.node.getChildByName('button'), this.node, 'CheckBox', 'onClicked');
        cc.vv.utils.addClickEvent(this.node.getChildByName('title'), this.node, 'CheckBox', 'onClicked');
        this.refresh();
    }

    refresh(){
        this.target.spriteFrame = this.checked ? this.checkedSprite : this.sprite;
    }

    onClicked(){
        this.checked = !this.checked;
        this.refresh(); 
    }
}